<template>
	<view style="padding: 15rpx 30rpx 15rpx 30rpx;">
		<view class="edit-item" @click="toOutside">
			<view class="edit-title" style="color: #fe3052;">站外对接(你的联系方式)</view>
			<view class="edit-info">
				<view class="info" style="color: #fe3052;">设置</view>
				<!-- <image src="../../../static/images/enter.png" mode="widthFix"></image> -->
				<uv-icon name="arrow-right" color="#fe3052" size="14"></uv-icon>
			</view>
		</view>
		<view class="edit-item">
			<uv-button class="avatar-button" :custom-style="{background:'#f6f6f6',height:'100%',width:'630rpx',justifyContent:'space-between',padding:'0',border:'0'}" open-type="chooseAvatar" @chooseavatar="chooseavatar">
				<view class="edit-title">
					头像
				</view>
				<view class="edit-info" @click="upload">
					<view class="info">
						<image v-if="userInfo.avatar!=''" :src="baseImgurl + '/' + userInfo.avatar" mode="aspectFill">
						</image>
						<image src="@/static/images/avatar.png" mode="aspectFill" v-else></image>
					</view>
					<image src="../../../static/images/enter.png" mode="widthFix"></image>
				</view>
			</uv-button>
		</view>
		<view class="edit-item">
			<view class="edit-title">昵称</view>
			<view class="edit-info">
				<view class="info">
					<input type="nickname" placeholder="请输入昵称" v-model="userInfo.username" />
				</view>
			</view>
		</view>
		<view class="edit-item">
			<view class="edit-title">性别</view>
			<view class="edit-info" @click="openPicker">
				<view class="info" style="color: #999999;">
					{{userInfo.sex_text?userInfo.sex_text:'请选择'}}
				</view>
				<image src="../../../static/images/enter.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="edit-item">
			<view class="edit-title">年龄段</view>
			<view class="edit-info">
				<view class="age-info">
					<input type="number" placeholder="请输入年龄段" v-model="userInfo.age" />
					<text class="unit">后</text>
				</view>
			</view>
		</view>
		<view class="edit-item" @click="openAddressPopup">
			<view class="edit-title">所在城市</view>
			<view class="edit-info">
				<view class="info" style="color: #222;">
					<text>{{userInfo.province_text}}{{userInfo.city_text}}</text>
				</view>
				<image src="../../../static/images/enter.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="edit-item2">
			<view class="title">生活理想    <span style="color: #999999;font-size: 24rpx;">（请勿在此留下联系方式）</span></view>
			<!-- <textarea class="area" name="" id="" cols="30" rows="10" placeholder="介绍一下自己吧~" v-model="userInfo.desc"
				maxlength="50"></textarea> -->
			<uv-textarea v-model="userInfo.desc" count  placeholderStyle="font-size:28rpx" placeholder="真诚有趣的介绍更吸引大家的联接" border="none" maxlength="50" :customStyle="{background:'#F6F6F6',height:'200rpx',marginTop:'30rpx',fontSize:'28rpx',padding:'0'}" :textStyle="{fontSize:'28rpx'}"></uv-textarea>
		</view>
		
		<view class="save" @click="emitUserInfo">保存</view>
	</view>
	<!-- 选择性别 -->
	<uv-picker ref="picker" title="性别" confirmColor="#FE3052" :columns="genders" @confirm="confirm"></uv-picker>
	<cityPicker :column="column" :addressList="mapDataList" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="addressConfirm" @cancel="visible=false" :visible="visible" />
	<!-- <uv-picker ref="picker" :columns="columns" @confirm="confirm" @change="change"></uv-picker> -->
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, reactive, ref, inject } from 'vue';
	import { throttle } from '@/utils/utils.js'
	import { useUserStore } from '@/store/modules/user.js'
	import { storeToRefs } from 'pinia';
	import { getCurrentInstance } from "vue";
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	const userstore = useUserStore()
	let { userInfo } = storeToRefs(userstore)
	const chat2 = inject('$chat')
	const { proxy } = getCurrentInstance();
	const genders = reactive([
		['男', '女']
	])
	const mapDataList = ref([])
	onLoad(() => {
		userstore.getUserInfo()
		baseImgurl.value = uni.getStorageSync('baseUrl')
	})
	const picker = ref()
	// 控制选择器显示和隐藏
	const visible = ref(false)
	// 点击模态框是否关闭弹框
	const maskCloseAble = ref(true)
	// 初始地区编码（例:或者['河北省','唐山市','丰南区']）
	const defaultValue = ref('')
	// 2是省市两列选择；3是省市区三列选择
	const column = ref(2)
	// 图片的域名
	const baseImgurl = ref('')
	const openAddressPopup = async () => {
		let res = await userstore.getMapDataList()
		if (res.code == 200) {
			mapDataList.value = res.data
			visible.value = true
		}
	}
	// 确认地址
	const addressConfirm = (val) => {
		// console.log(val)
		userInfo.value.province_text = val.provinceName
		userInfo.value.city_text = val.cityName
		userInfo.value.province_id = val.provinceCode
		userInfo.value.city_id = val.cityCode
		visible.value = false
	}
	const openPicker = () => {
		picker.value.open();
	}
	// 确认选择的性别
	const confirm = (e) => {
		userInfo.value.sex_text = e.value[0]
		if (userInfo.value.sex_text == '男') {
			userInfo.value.sex = 1
		} else {
			userInfo.value.sex = 2
		}
	}
	const toOutside = () => {
		uni.navigateTo({
			url: '/pages/user/outside/index'
		})
	}
	const chooseavatar = (e) => {
		uni.showLoading({
			title: "请稍后",
			mask: true,
		})
		try {
			uni.uploadFile({
				url: baseImgurl.value + '/api/applets/common/uploadFile',
				filePath: e.avatarUrl,
				header: {
					Token: uni.getStorageSync('token')
				},
				name: 'iFile',
				success: (result) => {
					uni.hideLoading()
					let uploadEnd = JSON.parse(result.data)
					userInfo.value.avatar = uploadEnd.data.url
				},
				fail: (err) => {
					uni.hideLoading()
				}
			});
		} catch (e) {
			uni.hideLoading()
			
		}
	}
	// 图片上传
	const upload = async () => {
		let res = await proxy.$request.headportraits()
		userInfo.value.avatar = res
		uni.$uv.toast('上传成功')
	}
	// 修改用户信息
	const emitUserInfo = throttle(async () => {
		let params = {
			username: uni.$uv.trim(userInfo.value.username, 'all'),
			sex: userInfo.value.sex,
			avatar: userInfo.value.avatar,
			age: uni.$uv.trim(userInfo.value.age, 'all'),
			desc: uni.$uv.trim(userInfo.value.desc, 'all'),
			province_id: userInfo.value.province_id,
			city_id: userInfo.value.city_id
		}
		let res = await userstore.emitUserInfo(params)
		if (res.code == 200) {
			uni.$uv.toast('修改成功')
			setTimeout(() => {
				chat2.initialize().then(res => {
					chat2.chatTUILogin(res).then(async res => {
						let result = await userstore.getUserInfo()
						// 修改个人标配资料
						let promise2 = chat2.chat.updateMyProfile({
							nick: result.data.username,
							avatar: result.data.avatar == '' ? '/static/images/avatar.png' : uni.getStorageSync('baseUrl') + result.data.avatar,
						});
						promise2.then(function(imResponse) {
						
						}).catch(function(imError) {
							console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
						});
						uni.navigateBack()
					})
				})
			}, 500)
		}
		userstore.getUserInfo()
	}, 200)
</script>

<style lang="scss" scoped>
	:deep().uni-picker-container .uni-picker-action.uni-picker-action-confirm {
		color: #FE3052;
	}

	.avatar-button {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.edit-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		margin: 25rpx 0rpx 25rpx 0rpx;
		width: 690rpx;
		height: 112rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.edit-title {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.edit-info {
			display: flex;
			align-items: center;

			.info {
				text-align: right;
				font-size: 28rpx;

				image {
					border-radius: 50%;
					width: 88rpx;
					height: 88rpx;
				}

				input {
					font-size: 28rpx;
				}
			}

			.age-info {
				display: flex;
				align-items: center;
				text-align: right;
				font-size: 28rpx;

				input {
					font-size: 28rpx;
				}

				.unit {
					padding-left: 20rpx;
				}
			}

			image {
				margin-left: 12rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.edit-item2 {
		padding: 30rpx;
		width: 690rpx;
		height: 340rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.area {
			padding-top: 30rpx;
			font-size: 28rpx;
		}
	}

	.save {
		margin-top: 60rpx;
		margin-bottom: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: #FE3052;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
</style>